<style type="text/css">
  .spinner svg {
    width: 25px;
    height: 25px;
  }
</style>
<ion-view title="{{groupName}}">

  <ion-nav-buttons side="right">

    <button class="button button-icon icon ion-person" ui-sref="policeGroupSetting">
    </button>

  </ion-nav-buttons>


  <ion-content style="z-index: 100;height: 30px;background-color: yellow" scroll="false" ng-show="!socketConnectStatus">
    <div class="row row-center" style="text-align: center;height: 100%;">
      <ion-spinner icon="ios-small" style="margin-top: 5px;"></ion-spinner>
      <p style="padding-left: 10px;margin-top: 10px">正在连接服务器...</p>
    </div>

  </ion-content>
  <ion-content class="rj-stable-content has-header">


    <!--socketConnectStatus:{{socketConnectStatus}}-->
    <div ng-repeat="item in historicalChats  track by $index">

      <p class="rj-message-time-left" ng-bind="item.curTime"
         style="width: 150px; background-color: transparent; color: gray"></p>

      <p class="rj-message-name-left" ng-if="!item.fromMe"  ng-bind="item.userName"></p>
      <div class="rj-message-wrap" ng-if="!item.fromMe">
        <img src="img/iconfont-member-black.png" class="rj-head-pic">
        <div>
          <span class="rj-triangle-left"></span>
          <p class="rj-message" ng-bind="item.chatContent"></p>
        </div>
      </div>
      <div class="rj-message-wrap" ng-if="item.fromMe">
        <img src="img/iconfont-member-blue.png" class="rj-head-pic-right">
        <span class="rj-triangle-right"></span>
        <p class="rj-message-right" ng-bind="item.chatContent"></p>
      </div>
    </div>
  </ion-content>
  <ion-footer-bar align-title="left" class="bar-light" resize-foot-bar keyboard-attach>
    <!-- <div class="buttons rj-footer-buttons-left">
        <button class="button button-icon icon ion-ios-mic-outline">
        </button>
    </div> -->
    <div class="rj-footer-btn-wrap">
      <button class="button button-icon icon ion-ios-chatbubble-outline rj-footer-btn-left">
      </button>
    </div>
    <label class="item item-input rj-footer-input item-input-inset">
      <textarea msd-elastic ng-model="send_content" placeholder="点击输入"></textarea>

    </label>
    <div class="rj-footer-btn-wrap">
      <div class="buttons" ng-show="!send_content || send_content === ''">
        <button class="button button-icon icon ion-ios-paperplane-outline rj-footer-btn-left">
        </button>
      </div>
      <div style="width: 70px" ng-hide="!send_content || send_content === ''">

        <button class="button button-stable" ng-click="sendMessage()">发送</button>
      </div>
    </div>
  </ion-footer-bar>

  <!--<ion-content class="content-stable"-->
  <!--on-tap="showTime = !showTime">-->

  <!--<div ng-repeat="message in messages"-->
  <!--ng-class="{other: message.userId != myId}"-->
  <!--class="messages">-->

  <!--<div class="message" ng-class="{'slide-right': showTime, '': !showTime}">-->
  <!--<span>{{ message.text }}</span>-->
  <!--</div>-->

  <!--<div class="time" ng-class="{'slide-right': showTime, '': !showTime}">{{message.time}}</div>-->


  <!--</div>-->

  <!--</ion-content>-->


  <!--<ion-footer-bar keyboard-attach class="bar-stable item-input-inset">-->
  <!--<label class="item-input-wrapper">-->
  <!--<input type="text" placeholder="Type your message" on-return="sendMessage(); closeKeyboard()" ng-model="data.message" on-focus="inputUp()" on-blur="inputDown()" />-->
  <!--</label>-->
  <!--<button class="button button-clear" ng-click="sendMessage()">-->
  <!--Send-->
  <!--</button>-->
  <!--</ion-footer-bar>-->
</ion-view>
